<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        body > .background {
            background: transparent url("../img/grass.jpg") no-repeat 50% 50%;
            background-size: cover;
            top: -100px;
            left: -100px;
            right: -100px;
            bottom: -100px;
            position: absolute;
        }
        * {
            box-sizing: border-box;
        }
        .box {
            border-radius: 50%;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -100px 0 0 -100px;
            overflow: hidden;
            -webkit-clip-path: circle(100px at 50% 50%);
            clip-path: url(#myClip);
        }
        .box > .background {
            background: transparent url("../img/380489-background-grass.jpg") no-repeat 50% 50%;
            background-size: cover;
            top: -100px;
            left: -100px;
            right: -100px;
            bottom: -100px;
            position: fixed;
            -webkit-filter: blur(7px);
            filter: blur(7px);
        }
        .background {
            background-position: 0 0;
            animation: anim 4s ease-in-out infinite alternate;
        }
        @keyframes anim {
            0% {
                background-position: calc(50% - 100px) calc(50% - 100px);
            }
            100% {
                background-position: calc(50% + 100px) calc(50% + 100px);
            }
        }
    </style>
</head>
<body>
<div class="background"></div>
<div class="box">
    <div class="background"></div>
</div>
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <defs>
        <clipPath id="myClip">
            <circle cx="50%" cy="50%" r="100" />
        </clipPath>
    </defs>

</svg>
</body>
</html>